import React, { memo } from 'react';
import { useState } from 'react';
import { Link, NavLink, Redirect, useLocation } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import {
    HeaderWrapper,
    HeaderLeftWrapper,
    Logo,
    HeaderMiddelWrapper,
    HeaderRightWrapper,
    Button,
    NavSearchWrapper,
    NavSearch
} from './style';

export default memo(function Navigation() {

    const [isShow, setShowState] = useState(false);

    return (
        <HeaderWrapper>
            <HeaderLeftWrapper>
                <NavLink to="/" className="logo">
                </NavLink>
            </HeaderLeftWrapper>
            <HeaderMiddelWrapper>
                <NavLink to="/main/home" className="middle_link" activeClassName="active">
                    <i className='iconfont icon'>&#xe604;</i>
                    首页
                </NavLink>
                <NavLink to="/main/download" className="middle_link">
                <i className='iconfont icon' >&#xe67f;</i>
                    下载APP
                </NavLink>
                <NavLink to="/main/technology" className="middle_link">
                    <i className='iconfont icon'>&#xe605;</i>IT 技术
                </NavLink>
                <NavSearchWrapper>
                    <CSSTransition classNames="slide"
                        in={isShow}
                        timeout={2000}
                    >
                        <NavSearch className={isShow ? 'focused' : ''}
                            onFocus={() => setShowState(true)}
                            onBlur={() => setShowState(false)}
                        >
                        </NavSearch>
                    </CSSTransition>
                    <i className={isShow ? 'iconfont search_icon' : 'iconfont'}>&#xe601;</i>
                </NavSearchWrapper>
            </HeaderMiddelWrapper>
            <HeaderRightWrapper>
                <button className="font_style">
                    <i className="iconfont">&#xe600;</i>
                </button>
                <NavLink to="/login" className="login_link">登录</NavLink>
                <Button className="write">
                    <i className="iconfont">&#xe616;</i>
                    <span style={{ marginLeft: 3 }}>写文章</span>
                </Button>
                 <NavLink to="/register" className="register">注册</NavLink>
            </HeaderRightWrapper>
        </HeaderWrapper>
    )

    function te() {
        console.log("ssss");

    }
})